<template>
  <div id="earlyWarning" />
</template>
<script>
export default {
  name: 'EarlyWarning',
  props: {
    historyBrandData: { type: Array, default: () => [] }
  },
  data() {
    return { orderChart: null };
  },
  watch: {
    historyBrandData: {
      handler(newVal, oldVal) {
        this.personnelData();
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.onresize = () => {
        this.orderChart.resize();
      };
    });
  },
  methods: {
    personnelData() {
      this.orderChart = this.$echarts.init(document.getElementById('earlyWarning'));
      const xData = [];
      const brandData = [];
      this.historyBrandData.forEach(val => {
        xData.push(val.productBrandName);
        brandData.push(val.inQty);
      });
      this.orderChart.setOption({
        title: { text: '件', textStyle: { fontSize: this.$f * 12, fontWeight: 400, color: '#858D9D' } },
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'line', label: { backgroundColor: '#FC9736' }, lineStyle: { color: '#FC9736', width: this.$f * 2, type: 'dashed' } }
        },
        grid: { top: '15%', left: '2%', right: '2%', bottom: '3%', containLabel: true },
        dataZoom: [{ type: 'slider', show: true, xAxisIndex: [0], bottom: 0, height: this.$f * 5, showDetail: false, startValue: 0, endValue: 9 }],
        xAxis: [
          { type: 'category', axisTick: { show: false }, data: xData, axisLabel: { fontSize: this.$f * 12 } },
          {
            type: 'category',
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitArea: { show: false },
            splitLine: { show: false },
            data: []
          }
        ],
        yAxis: [{ type: 'value', axisLabel: { fontSize: this.$f * 12 }, minInterval: 1 }],
        series: [
          {
            type: 'bar',
            stack: '总量',
            itemStyle: { normal: { show: true, color: '#FC9736', borderWidth: 0, borderColor: '#333' } },
            label: { normal: { show: false } },
            barWidth: this.$f * 12,
            data: brandData
          }
        ]
      });
    }
  }
};
</script>
